<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/style.css">
  <title>VNode</title>
</head>
<body>
  <img src="../img/VNode-types.png" alt="">
  <h2>VNode</h2>
  <h3>什么是VNode</h3>
  <li>
    VNode不是虚拟DOM，VNode构成了虚拟DOM树<span>VNode是虚拟DOM中比较重要的知识点</span>
  </li>
  <li>
    VNode只是一个名字，本质上其实是JavaScript中一个普通的对象。这个对象是节点描述对象。<span>真是DOM元素上的所有属性再VNode对象上都存在对应的属性</span>，它描述了应该<span>怎样去（如何去，或者说需要调用方法，而不仅仅是描述）</span>创建真实的节点
  </li>
  <li>
    每次渲染视图前都先创建VNode,然后再对比。所以需要将就的VNode缓存起来
  </li>

  <h3>VNode的作用</h3>
  <li>
    VueJS目前对状态的侦测策略采用了中等粒度。<span>当状态发生变化的时候，只通知到组件级别</span>，然后组件内使用虚拟DOM来渲染视图。<b>也就是说，组件使用的众多状态中有一个发生了变化，那么整个组件就要被重新渲染</b>
  </li>

  <h3>VNode类型</h3>
  <li>
    不同类型的VNode之间其实只是属性不同。
  </li>
  <li>
    注释节点: text = args  isCommonent = true
  </li>
  <li>
    文本节点 text = args
  </li>
  <li>
    克隆节点： 与被克隆节点属性相同，不同的是isClone = true
  </li>
  <li>
    元素节点： 
    <ul class="incent">
      <li>tag: 标签名</li>
      <li>data: 标签的属性</li>
      <li>children: 当前节点的子节点列表</li>
      <li>context: 当前组件/vm</li>
    </ul>
  </li>
  <li>
      组件节点： 
      <ul class="incent">
        <li>tag: 标签名</li>
        <li>data: 标签的属性</li>
        <li>children: 当前节点的子节点列表</li>
        <li>context: 当前组件/vm</li>
        <li>componentOptions: 组件节点的选项参数 data/prop/children等</li>
        <li>componentInstance: 组件的实例</li>
      </ul>
  </li>
  <li>
    函数式组件： 
    <ul class="incent">
      <li id="">
        拥有组件节点的属性
      </li>
      <li>
        functionalContext
      </li>
      <li>
        functionalOptions
      </li>
    </ul>
  </li>
</body>
</html>